<template>
	<view class="main">
		<view class="active_tit">
			<view class="tit">
				近一年银行流水：
			</view>
			<view v-if="isPad" class="add" @click="add">
				新增
			</view>
		</view>
		<view class="table">
			<view class="th">
				<view class="thCont">
					结算账户银行名称
				</view>
				<view class="thCont">
					<view  class="select">
						<picker :disabled="!isPad" mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth1"   @change="monthSelect">
							<view v-if="!bankStatement.yearMonth.yearMonth1" class="uni-input">请选择年月</view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth1}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view  class="select" >
						<picker  mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth2" disabled  @change="(o)=>{bankStatement.yearMonth.yearMonth2=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth2" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth2}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view  class="select" >
					
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth3" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth3=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth3" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth3}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view  class="select">
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth4" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth4=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth4" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth4}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view  class="select">
					
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth5" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth5=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth5" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth5}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth6" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth6" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth6}}</view>
						</picker>
					</view>
					
				</view>

				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth7" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth7" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth7}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth8" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth8" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth8}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth9" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth9" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth9}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth10" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth10" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth10}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth11" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth11" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth11}}</view>
						</picker>
					</view>
					
				</view>
				
				<view class="thCont">
					<view class="select" >
						
						<picker mode="date" fields='month' :value="bankStatement.yearMonth.yearMonth12" disabled   @change="(o)=>{bankStatement.yearMonth.yearMonth6=o.detail.value}">
							<view v-if="!bankStatement.yearMonth.yearMonth12" class="uni-input"></view>
						    <view v-else class="uni-input">{{bankStatement.yearMonth.yearMonth12}}</view>
						</picker>
					</view>
					
				</view>
				<view class="thCont">
					合计（元）
				</view>
				<view class="thCont" v-if="loanType==='4'">
					近半年结息（元）
				</view>
				<view class="thCont" v-if="loanType==='4'">
					日均存款（元）
				</view>
				
				<view class="thCont" v-if="isPad">
					操作
				</view>
			</view>
			<scroll-view style="max-width: 110rem;white-space: nowrap;border: 1px solid #ddd;" :scroll-x="true">
				<block v-for="(item,index) in bankStatement.statement">
					<view class="td">
						<view class="tdCont">
							<input :disabled="!isPad" class="hinput" type="text" placeholder="银行名称"  v-model="item.bankName" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement1" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement2" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number"  placeholder="请输入"  v-model="item.statement3" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement4" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement5" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement6" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement7" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement8" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement9" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement10" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement11" />
						</view>
						<view class="tdCont">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.statement12" />
						</view>
						<view class="tdCont">
							<mInput  class="hinput" maxlength="16" placeholder="请输入"  disabled v-model="item.hj" />
						</view>
						<view class="tdCont"  v-if="loanType ==='4'">
							<mInput :disabled="!isPad" maxlength="16" type="number" placeholder="请输入"  v-model="item.halfYearSettlement" />
						</view>
						<view class="tdCont"  v-if="loanType ==='4'">
							<mInput  class="hinput" maxlength="16" placeholder="请输入"  disabled v-model="item.averageDayMoney" />
						</view>
						<view class="tdCont" v-if="isPad">
							<button  style="font-size: 2.4rem;padding:0 2rem;" size="mini" type="default" @click="delet(item)">删除</button>
						</view>
					</view>
				</block>
			</scroll-view>
			
			<view class="td" style="border-left: 1px solid #dddddd;">
				<view class="tdCont">
					合计（元）
				</view>
				<view class="tdCont" >
					<mInput class="hinput" type="text" disabled v-model="hj.m1" />
				</view>
				<view class="tdCont">
					<mInput class="hinput" type="text" disabled v-model="hj.m2" />
				</view>
				<view class="tdCont">
					<mInput class="hinput" type="text" disabled v-model="hj.m3" />
				</view>
				<view class="tdCont">
					<mInput class="hinput" type="text" disabled v-model="hj.m4" />
				</view>
				<view class="tdCont">
					<mInput class="hinput" type="text" disabled v-model="hj.m5" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m6" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m7" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m8" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m9" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m10" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m11" />
				</view>
				<view class="tdCont">
					<mInput  class="hinput" type="text" disabled v-model="hj.m12" />
				</view>
				<view class="tdCont">
					<mInput class="hinput" type="text" disabled v-model="hj.hj" />
				</view>
				<view class="tdCont" v-if="loanType ==='4'">
					<mInput  class="hinput" type="text" disabled v-model="hj.m13" />
				</view>
				<view class="tdCont"  v-if="loanType ==='4'">
					<mInput class="hinput" type="text" disabled v-model="hj.m14" />
				</view>
				<view class="tdCont">
					
				</view>


			</view>
		</view>
		<w-picker   @confirm="onConfirm1($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date1" />
		<w-picker   @confirm="onConfirm2($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date2" />
		<w-picker   @confirm="onConfirm3($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date3" />
		<w-picker   @confirm="onConfirm4($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date4" />
		<w-picker   @confirm="onConfirm5($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date5" />
		<w-picker  @confirm="onConfirm6($event)" mode="date" startYear="1990"  endYear="2099" fields="month" ref="date6" />

	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	export default {
		data() {
			return {
				loanType:'',
				isPad:false,
				dateNow:'',
				visible: true,
				hj: {},
				bankStatement: {
					yearMonth: {
						yearMonth1: '',
						yearMonth2: '',
						yearMonth3: '',
						yearMonth4: '',
						yearMonth5: '',
						yearMonth6: ''
					},
					statement: [{
						"bankName": "",
						"statement1": '',
						"statement2": '',
						"statement3": '',
						"statement4": '',
						"statement5": '',
						"statement6": '',
						halfYearSettlement:'',
						averageDayMoney:''
					}]
				}
			}
		},
		onLoad() {

		},
		components: {
			wPicker
		},
		watch: {
			bankStatement: {
				handler: function(res) {
					console.warn('银行流水数据', res)
					let totalPrice = 0
					this.hj.m1 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement1), 0)
					this.hj.m2 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement2), 0)
					this.hj.m3 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement3), 0)
					this.hj.m4 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement4), 0)
					this.hj.m5 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement5), 0)
					this.hj.m6 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement6), 0)
					this.hj.m7 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement7), 0)
					this.hj.m8 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement8), 0)
					this.hj.m9 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement9), 0)
					this.hj.m10 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement10), 0)
					this.hj.m11 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement11), 0)
					this.hj.m12 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.statement12), 0)
					if(this.loanType ==='4'){
						this.hj.m13 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.halfYearSettlement), 0)
						this.hj.m14 = this.bankStatement.statement.reduce((totalPrice, item) => totalPrice + Number(item.averageDayMoney), 0)
					}
					
					
                    let arr = this.bankStatement.statement
					for(let i=0;i<arr.length;i++){
						arr[i].hj = Number(arr[i].statement1)+ Number(arr[i].statement2)+ Number(arr[i].statement3)+ Number(arr[i].statement4)+ Number(arr[i].statement5)+ Number(arr[i].statement6)+ Number(arr[i].statement7)+ Number(arr[i].statement8)+ Number(arr[i].statement9)+ Number(arr[i].statement10)+ Number(arr[i].statement11)+ Number(arr[i].statement12)
					    if(this.loanType ==='4'){ 	
					    	arr[i].averageDayMoney = (Number( arr[i].halfYearSettlement)*2/0.0035).toFixed(2)
					    }
					
					
					}
					
					this.hj.hj = Number(this.hj.m1)+Number(this.hj.m2)+Number(this.hj.m3)+Number(this.hj.m4)+Number(this.hj.m5)+Number(this.hj.m6)+Number(this.hj.m7)+Number(this.hj.m8)+Number(this.hj.m9)+Number(this.hj.m10)+Number(this.hj.m11)+Number(this.hj.m12)
                    getApp().globalData.stdOffsurBankStatement = res

				},
				deep: true
			}
		},
		onShow(){
			let date=new Date().Format('yyyy-MM')
			//this.dateNow = date
		},
		mounted() {
			this.isPad = getApp().globalData.isPad
			let date=new Date().Format('yyyy-MM')
			//this.dateNow = date
			
			//获取返显数据
			setTimeout(()=>{    
				this.loanType = getApp().globalData.stdOffsurBaiscInfo.loanType
				//数据反显
				this.bankStatement = getApp().globalData.stdOffsurBankStatement
				
			},getApp().globalData.timeout)

		},
		methods: {
			monthSelect(o){
				console.log(o)
				this.bankStatement.yearMonth.yearMonth1 = o.detail.value
				this.jsYM(o.detail.value)
			},
			
			delet(item){
				if (item.uuid !== '' && item.uuid !== undefined && item.uuid !== null) {
					if (getApp().globalData.stdOffsursDelete['stdOffsurBankStatement'] == undefined) {
						getApp().globalData.stdOffsursDelete['stdOffsurBankStatement'] = []
					}
					getApp().globalData.stdOffsursDelete['stdOffsurBankStatement'].push(item.uuid)
					
				}
				this.bankStatement.statement.remove(item)
			},
			bindDateChange(e){
				
			},
			onConfirm1(e) {
				this.bankStatement.yearMonth.yearMonth1 = e.value
			},
			onConfirm2(e) {
				this.bankStatement.yearMonth.yearMonth2 = e.value
			},
			onConfirm3(e) {
				this.bankStatement.yearMonth.yearMonth3 = e.value
			},
			onConfirm4(e) {
				this.bankStatement.yearMonth.yearMonth4 = e.value
			},
			onConfirm5(e) {
				this.bankStatement.yearMonth.yearMonth5 = e.value
			},
			onConfirm6(e) {
				this.bankStatement.yearMonth.yearMonth6 = e.value
			},
			selectDate(time) {
				this.$refs[time].show()
			},
			add() {
				let obj = {
					"bankName": "",
					"statement1": '',
					"statement2": '',
					"statement3": '',
					"statement4": '',
					"statement5": '',
					"statement6": '',
					"statement7": '',
					"statement8": '',
					"statement9": '',
					"statement10": '',
					"statement11": '',
					"statement12": '',
					hj: '',
					halfYearSettlement:'',
					averageDayMoney:''
					
				}
				this.bankStatement.statement.push(obj)
			},
			jsYM(dtstr){
				var s = dtstr.split("-");
				//console.log(s)
				var yy = parseInt(s[0]);
				var mm = parseInt(s[1]);
				console.log(yy,mm)
				if(mm+1<=12){   
					let M = mm+1
					if(mm+1<10){
						M = '0'+(mm+1)
					}
					this.bankStatement.yearMonth.yearMonth2 = yy+'-'+M
				}else{
					let M = (mm+1-12)
					if(mm+1-12<10){
						M = '0'+(mm+1-12)
					}
					this.bankStatement.yearMonth.yearMonth2 = yy+1+'-'+M
				}
				
				if(mm+2<=12){
					let M = mm+2
					if(mm+2<10){
						M = '0'+(mm+2)
					}
					this.bankStatement.yearMonth.yearMonth3 = yy+'-'+M
				}else{
					let M = (mm+2-12)
					if(mm+2-12<10){
						M = '0'+(mm+2-12)
					}
					this.bankStatement.yearMonth.yearMonth3 = yy+1+'-'+M
				}
				
				if(mm+3<=12){
					let M = mm+3
					if(mm+3<10){
						M = '0'+(mm+3)
					}
					this.bankStatement.yearMonth.yearMonth4 = yy+'-'+M
				}else{
					let M = (mm+3-12)
					if(mm+3-12<10){
						M = '0'+(mm+3-12)
					}
					this.bankStatement.yearMonth.yearMonth4 = yy+1+'-'+M
				}
				
				if(mm+4<=12){
					let M = mm+4
					if(mm+4<10){
						M = '0'+(mm+4)
					}
					this.bankStatement.yearMonth.yearMonth5 = yy+'-'+M
				}else{
					let M = (mm+4-12)
					if(mm+4-12<10){
						M = '0'+(mm+4-12)
					}
					this.bankStatement.yearMonth.yearMonth5 = yy+1+'-'+M
				}
				
				if(mm+5<=12){
					let M = mm+5
					if(mm+5<10){
						M = '0'+(mm+5)
					}
					this.bankStatement.yearMonth.yearMonth6 = yy+'-'+M
				}else{
					let M = (mm+5-12)
					if(mm+5-12<10){
						M = '0'+(mm+5-12)
					}
					this.bankStatement.yearMonth.yearMonth6 = yy+1+'-'+M
				}
				
				if(mm+6<=12){
					let M = mm+6
					if(mm+6<10){
						M = '0'+(mm+6)
					}
					this.bankStatement.yearMonth.yearMonth7 = yy+'-'+M
				}else{
					let M = (mm+6-12)
					if(mm+6-12<10){
						M = '0'+(mm+6-12)
					}
					this.bankStatement.yearMonth.yearMonth7 = yy+1+'-'+M
				}
				
				if(mm+7<=12){
					let M = mm+7
					if(mm+7<10){
						M = '0'+(mm+7)
					}
					this.bankStatement.yearMonth.yearMonth8 = yy+'-'+M
				}else{
					let M = (mm+7-12)
					if(mm+7-12<10){
						M = '0'+(mm+7-12)
					}
					this.bankStatement.yearMonth.yearMonth8 = yy+1+'-'+M
				}
				
				if(mm+8<=12){
					let M = mm+8
					if(mm+8<10){
						M = '0'+(mm+8)
					}
					this.bankStatement.yearMonth.yearMonth9 = yy+'-'+M
				}else{
					let M = (mm+8-12)
					if(mm+8-12<10){
						M = '0'+(mm+8-12)
					}
					this.bankStatement.yearMonth.yearMonth9 = yy+1+'-'+M
				}
				
				
				if(mm+9<=12){
					let M = mm+9
					if(mm+9<10){
						M = '0'+(mm+9)
					}
					this.bankStatement.yearMonth.yearMonth10 = yy+'-'+M
				}else{
					let M = (mm+9-12)
					if(mm+9-12<10){
						M = '0'+(mm+9-12)
					}
					this.bankStatement.yearMonth.yearMonth10 = yy+1+'-'+M
				}
				
				if(mm+10<=12){
					let M = mm+10
					if(mm+10<10){
						M = '0'+(mm+10)
					}
					this.bankStatement.yearMonth.yearMonth11 = yy+'-'+M
				}else{
					let M = (mm+10-12)
					if(mm+10-12<10){
						M = '0'+(mm+10-12)
					}
					this.bankStatement.yearMonth.yearMonth11 = yy+1+'-'+M
				}
				
				if(mm+11<=12){
					let M = mm+11
					if(mm+11<10){
						M = '0'+(mm+9)
					}
					this.bankStatement.yearMonth.yearMonth12 = yy+'-'+M
				}else{
					let M = (mm+11-12)
					if(mm+11-12<10){
						M = '0'+(mm+11-12)
					}
					this.bankStatement.yearMonth.yearMonth12 = yy+1+'-'+M
				}
				
				
				
				
			},
		}
	}
</script>

<style lang="scss">
	.table {
		//width: 100%;
		font-size: 3rem;
		display: flex;

		.th {
			//width: 20%;
			min-width: 30rem;
			background: #EAF0FF;
			border: 1px solid #dddddd;
			// display: flex;
			// justify-content: space-around;
			text-align: center;

			.thCont {
				//width: 25%;
				padding: 1rem 2rem;
				height: 7.2rem;
				line-height: 7rem;
			}
		}

		.td {
			//width: 10%;
			border: 1px solid #dddddd;
			border-left: none;
			// display: flex;
			// justify-content: space-around;
			text-align: center;
			display: inline-block;

			.tdCont {
				//width: 25%;
				min-width: 30rem;
				border-right: 1px solid #dddddd;
				border-bottom: 1px solid #dddddd;
				padding: 1rem 2rem;
				display: flex;
				align-items: center;
				justify-content: center;
				overflow: hidden;
				height: 7rem;
				.hinput{
					font-size: 2.8rem;
				}

				.btn {
					font-size: 2.8rem;
					width: 18rem;
				}
			}
		}
	}
</style>
